<template>
  <el-row>
    <el-row>
      <el-form :model="formInline" class="search_prod" label-width="120px">
        <el-form-item label="订单号">
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-input
                size="small"
                clearable
                v-model="formInline.oid"
              ></el-input>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3"
            >用户名&nbsp;&nbsp;&nbsp;</el-col
          >
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-input
                size="small"
                clearable
                v-model="formInline.username"
              ></el-input>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3"
            >用户昵称&nbsp;&nbsp;&nbsp;</el-col
          >
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-input
                size="small"
                clearable
                v-model="formInline.nickname"
              ></el-input>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item label="收货人姓名">
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-input
                size="small"
                clearable
                v-model="formInline.mail_name"
              ></el-input>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3"
            >收货人地址&nbsp;&nbsp;&nbsp;</el-col
          >
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-input
                size="small"
                clearable
                v-model="formInline.mail_address"
              ></el-input>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3"
            >收货人手机&nbsp;&nbsp;&nbsp;</el-col
          >
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-input
                size="small"
                clearable
                v-model="formInline.mail_tel"
              ></el-input>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-input
                size="small"
                clearable
                v-model="formInline.title"
              ></el-input>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3"
            >商家用户名&nbsp;&nbsp;&nbsp;</el-col
          >
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-input
                size="small"
                clearable
                v-model="formInline.sid_cn"
              ></el-input>
            </el-col>
          </el-col>

          <el-col class="tr col_label" :span="3"
            >快递单号&nbsp;&nbsp;&nbsp;</el-col
          >
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-input
                size="small"
                clearable
                v-model.number="formInline.mail_oid"
              ></el-input>
            </el-col>
          </el-col>
        </el-form-item>

        <el-form-item label="收货人地区">
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <city-cascader :level="0" @change="handleItemChange" />
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3"
            >支付方式&nbsp;&nbsp;&nbsp;</el-col
          >
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-select
                v-model="formInline.pay"
                clearable
                size="small"
                placeholder="请选择支付方式"
              >
                <el-option
                  v-for="item in payList"
                  size="small"
                  :key="item.id"
                  :label="item.title"
                  :value="item.title"
                ></el-option>
              </el-select>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3"
            >订单类型&nbsp;&nbsp;&nbsp;</el-col
          >
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-select
                v-model="formInline.types"
                clearable
                size="small"
                placeholder="请选择订单类型"
              >
                <el-option
                  v-for="(item, i) in types_option"
                  size="small"
                  :key="i"
                  :label="item.title"
                  :value="item.index"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-col :span="4">
            <el-col :span="22" class="search_time_y_width">
              <el-date-picker
                style="width: 100%"
                v-model="createTime"
                type="datetimerange"
                size="small"
                align="right"
                unlink-panels
                clearable
                value-format="timestamp"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions2"
              ></el-date-picker>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3"
            >完成时间&nbsp;&nbsp;&nbsp;</el-col
          >
          <el-col :span="4">
            <el-col :span="22" class="search_time_y_width">
              <el-date-picker
                style="width: 100%"
                v-model="completeTime"
                type="datetimerange"
                size="small"
                align="right"
                unlink-panels
                clearable
                value-format="timestamp"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions2"
              ></el-date-picker>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3"
            >付款时间&nbsp;&nbsp;&nbsp;</el-col
          >
          <el-col :span="4">
            <el-col :span="22" class="search_time_y_width">
              <el-date-picker
                style="width: 100%"
                v-model="payTime"
                size="small"
                type="datetimerange"
                align="right"
                unlink-panels
                clearable
                range-separator="-"
                value-format="timestamp"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions2"
              ></el-date-picker>
            </el-col>
          </el-col>
        </el-form-item>

        <el-form-item
          label="自提点用户名"
          v-if="
            $store.state.plugin.xxmk && $store.state.plugin.xxmk.is_open == 1
          "
        >
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-input
                size="small"
                clearable
                v-model="formInline.lifting_yhm"
              ></el-input>
            </el-col>
          </el-col>
          <el-col class="tr col_label" :span="3"
            >自提点店铺名称&nbsp;&nbsp;&nbsp;</el-col
          >
          <el-col :span="4">
            <el-col :span="16" class="search_input_width">
              <el-input
                size="small"
                clearable
                v-model="formInline.lifting_title"
              ></el-input>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-row class="tl">
            <el-col :span="24">
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                type="primary"
                @click="subOrderInfo"
                >查询</el-button
              >

              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                type="primary"
                @click="exportExcel"
                >导出</el-button
              >

              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                type="primary"
                @click="delOrderInfo"
                >一键清除</el-button
              >
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                type="primary"
                @click="export_goods"
                >导出发货单</el-button
              >
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                type="primary"
                @click="$router.push('/index/order/import')"
                >导入运单</el-button
              >

              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                type="primary"
                @click="export_danpin"
                >导出单品</el-button
              >
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row class="search_prod" style="padding-top: 0">
      <div class="sups_tub clearfix">
        <div
          class="tabs j-tab clearfix mgt10 mgb20 tl user_tables"
          v-if="$route.query.action == 4"
        >
          <a
            @click="getInfo('所有订单')"
            class="tabs_a f_l"
            :class="{ template_active: acIndex == '所有订单' }"
            >所有订单</a
          >
          <a
            @click="getInfo('拼团成功')"
            class="tabs_a f_l"
            :class="{ template_active: acIndex == '拼团成功' }"
            >拼团成功</a
          >
          <a
            @click="getInfo('拼团失败')"
            class="tabs_a f_l"
            :class="{ template_active: acIndex == '拼团失败' }"
            >拼团失败</a
          >
        </div>
        <div class="tabs j-tab clearfix mgt10 mgb20 tl user_tables" v-else>
          <a
            @click="getInfo('所有订单')"
            class="tabs_a f_l"
            :class="{ template_active: acIndex == '所有订单' }"
            >所有订单</a
          >
          <a
            @click="getInfo('未支付')"
            class="tabs_a f_l"
            :class="{ template_active: acIndex == '未支付' }"
            >待付款</a
          >
          <a
            @click="getInfo('配货中')"
            class="tabs_a f_l"
            :class="{ template_active: acIndex == '配货中' }"
            >待发货</a
          >
          <a
            @click="getInfo('已发货')"
            class="tabs_a f_l"
            :class="{ template_active: acIndex == '已发货' }"
            >待收货</a
          >

          <a
            @click="getInfo('用户自提')"
            class="tabs_a f_l"
            :class="{ template_active: acIndex == '用户自提' }"
            >用户自提</a
          >

          <a
            @click="getInfo('已完成')"
            class="tabs_a f_l"
            :class="{ template_active: acIndex == '已完成' }"
            >交易完成</a
          >
          <a
            @click="getInfo('退货中')"
            class="tabs_a f_l"
            :class="{ template_active: acIndex == '退货中' }"
            >退货中</a
          >

          <a
            v-if="ifOpenqsps"
            @click="getInfo('待领单')"
            class="tabs_a f_l"
            :class="{ template_active: acIndex == '待领单' }"
            >待领单</a
          >
          <a
            v-if="ifOpenqsps"
            @click="getInfo('配送中')"
            class="tabs_a f_l"
            :class="{ template_active: acIndex == '配送中' }"
            >配送中</a
          >
        </div>
      </div>
    </el-row>
  </el-row>
</template>
<script>
import cityCascader from "@/components/currency/cityCascader/cityCascader";
import { mapState } from "vuex";
export default {
  name: "productSearch",
  data() {
    return {
      fileList: [],
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      types_option: [],
      createTime: [],
      payTime: [],
      completeTime: [],
      formInline: {
        oid: this.$route.query.oid || "",
        nickname: "",
        sid_cn: "",
        mail_name: "",
        mail_address: "",
        mail_tel: "",
        title: "",
        pay: "",
        mail_oid: "",
        mail_province: "",
        created_time_begin: "",
        created_time_end: "",
        pay_time_begin: "",
        pay_time_end: "",
        complete_time_begin: "",
        complete_time_end: "",
        status: "",
        username: "",
        lifting_yhm: "",
        lifting_title: "",
      },
      optionProps: {
        value: "id",
        label: "title",
        children: "z",
      },
      payList: [],
      regionProps: {
        value: "name",
        label: "name",
      },

      op: [],
      acIndex: "所有订单",
      open: false,
      openHeight: "0",
    };
  },
  computed: {
    ...mapState({
      puhlig: (state) => state.plugin,
    }),
    ifOpenqsps() {
      if (
        typeof this.puhlig.qsps != undefined &&
        this.puhlig.qsps &&
        this.puhlig.qsps.is_open == "1"
      ) {
        return true;
      } else {
        return false;
      }
    },
  },
  components: {
    cityCascader,
  },
  methods: {
    export_goods() {
      var params = {};
      this.$fnc.postExcelFile(params, "/api/admin/export_order/order_goods");
    },
    get_ordertype() {
      this.$api.getShops.get_orderoption({}).then((res) => {
        if (res.data.code == 200) {
          var type = this.$route.query.action;
          var arr = [];
          // if (type >= 0) {
          for (var i in res.data.result) {
            var obj = {};
            obj.index = i;
            obj.title = res.data.result[i];
            // if (i == type) {
            //     this.formInline.types = res.data.result[i];
            //     obj.disabled = false;
            // } else {
            //     obj.disabled = true;
            // }
            arr.push(obj);
          }
          this.types_option = arr;
        }
      });
    },
    handleItemChange(val) {
      this.formInline.mail_province = val[0];
    },
    exportExcel() {
      var params = {};
      params = this.formInline;

      this.$fnc.postExcelFile(params, "/api/admin/export/order");
    },
    delOrderInfo() {
      this.formInline = {
        oid: this.$route.query.oid || "",
        nickname: "",
        sid_cn: "",
        mail_name: "",
        mail_address: "",
        mail_tel: "",
        title: "",
        pay: "",
        mail_oid: "",
        mail_province: "",
        created_time_begin: "",
        created_time_end: "",
        pay_time_begin: "",
        pay_time_end: "",
        complete_time_begin: "",
        complete_time_end: "",
        status: "",
        username: "",
        lifting_yhm: "",
        lifting_title: "",
      };
      this.$emit("sendOrderSearch", this.formInline);
    },
    subOrderInfo() {
      this.$emit("sendOrderSearch", this.formInline);
    },
    getInfo(iddex) {
      this.acIndex = iddex;
      if (iddex == "所有订单") {
        this.formInline.status = "";
      } else {
        this.formInline.status = iddex;
      }
      this.$emit("sendStatus", this.formInline.status);
    },
    getPayList() {
      var params = {};
      params.parent_id = "";
      this.$api.getConfig.payLists(params).then((res) => {
        if (res.data.code == 200 && res.data.status == 1 && res.data.result) {
          this.payList = res.data.result;
        }
      });
    },
    openSearch() {
      this.openHeight = this.open ? "0" : "500";
      if (this.open) {
        this.formInline.mail_province = "";
        this.createTime = "";
        this.payTime = "";
        this.completeTime = "";
      }
      this.open = !this.open;
    },
    export_danpin() {
      var params = {};
      params = this.formInline;
      this.$fnc.postExcelFile(params, "/api/admin/export/order_product");
    },
  },
  created() {
    this.getPayList();
    this.get_ordertype();
  },
  mounted() {
    if (this.$route.path.indexOf("supplierorder") >= 0) {
      this.formInline.sid_cn = this.$route.query.nickname || "";
    }
    if (this.$route.query.status) {
      this.acIndex = this.$route.query.status;
    }
  },
  watch: {
    createTime(val) {
      if (val != "") {
        this.formInline.created_time_begin = this.$fnc.phptime(val[0]);
        this.formInline.created_time_end = this.$fnc.phptime(val[1]);
      } else {
        this.formInline.created_time_begin = "";
        this.formInline.created_time_end = "";
      }
    },
    payTime(val) {
      if (val != "") {
        this.formInline.pay_time_begin = this.$fnc.phptime(val[0]);
        this.formInline.pay_time_end = this.$fnc.phptime(val[1]);
      } else {
        this.formInline.pay_time_begin = "";
        this.formInline.pay_time_end = "";
      }
    },
    completeTime(val) {
      if (val != "") {
        this.formInline.complete_time_begin = this.$fnc.phptime(val[0]);
        this.formInline.complete_time_end = this.$fnc.phptime(val[1]);
      } else {
        this.formInline.complete_time_begin = "";
        this.formInline.complete_time_end = "";
      }
    },
  },
};
</script>
